<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>People</title>
    <link rel="stylesheet" href="../css/people_view.css">

</head>
<body>
<div class="people_popup">
    <div class="mask"></div>
    <div id="people_view">
        <form action="">
            <div class="people_detail">
                <div class="detail_left">
                    <div class="header">
                        <img src="../images/wnm.png" alt="" class="header_img">
                        <div class="like">
                            <div class="like_people">
                                <span  class="like_count">5</span><i id="like_icon" class="like_icon active "></i>
                                <div class="like_people_list">
                                    <span class="cor_l_t"></span>
                                    <span class="cor_r_t"></span>
                                    <span class="cor_l_b"></span>
                                    <span class="cor_r_b"></span>
                                    <div class="scroll_list">
                                        <ul>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>
                                            <li><img title="王尼玛" src="../images/wnm1.png" alt=""></li>
                                            <li><img title="张全蛋" src="../images/wnm2.png" alt=""></li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:void(0)" class="like_btn "></a>
                        </div>
                    </div>
                    <div class="contact">
                        <ul>
                            <li><i class="tel_icon"></i>17715396669 /  2580</li>
                            <li><i class="email_icon"></i><a href="mailto::anderson.cui@nextev.com">anderson.cui@nextev.com</a></li>
                            <li><i class="location_icon"></i><span class="editable">SH HQ No.20 4F West<input class="edit_ipt location_ipt" type="hidden" value="SH HQ No.20 4F West"></span></li>
                        </ul>
                    </div>
                    <div class="others">
                        <span class="value_icon"></span>
                        <span class="constellation cons_10"></span>
                    </div>
                </div>
                <div class="detail_right">
                    <div class="name">
                        <h2>NiMa WANG<span class="ch_name"> 王尼玛</span></h2>
                        <div class="star">
                            <span class="star_icon"></span>
                            <span class="star_icon"></span>
                            <span class="star_icon"></span>
                            <span class="star_icon"></span>
                            <span class="star_icon"></span>
                        </div>
                    </div>
                    <span class="num">No.769</span>
                    <p class="team">Value Team 18</p>
                    <div class="tags">
                        <i class="tag_icon"></i>
                        <a href="javascript:void(0)" class="tag">E-powertrain</a>
                        <a href="javascript:void(0)" class="tag">Running Club</a>
                        <a href="javascript:void(0)" class="tag">Running Club </a>
                    </div>
                    <div class="sub">
                        <a href="javascript:void(0)" id="edit_btn" class="edit_btn edit_icon"></a>
                        <p class="short_line"></p>
                        <p class="item"><label>Department: </label><span class="value">STA</span></p>
                        <p class="item"><label>Report to: </label><span class="value"><a href="" class="leader">Jasen ZHANG</a></span></p>
                        <p class="item"><label>Position: </label><span class="value">Senior STA Engineer,EE</span></p>
                        <p class="item"><label>SMT: </label><span class="value">EE<input class="edit_ipt" type="hidden" value="EE"></span></p>
                        <p class="item"><label>Project: </label><span class="value">ES8<input class="edit_ipt" type="hidden" value="ES8"></span></p>
                        <p class="short_line"></p>
                        <p class="long_line" style="margin-top: -10px;"></p>
                        <p class="item"><label>Nick Name: </label><span class="value">Andy<input class="edit_ipt" type="hidden" value="Andy"></span></p>
                        <p class="item"><label>Highest Education：</label><span class="value">Bachelor Degree,Harbin University of Science and Technology</span></p>
                        <p class="item"><label>Credential:</label><span class="value">Bosch Automotive Products(suzhou),CQE</span></p>
                        <p class="item"><label>Hobbies:</label><span class="value">Climbing,Fishing,Make friends,Travel</span></p>
                        <p class="item"><label>Hometown:</label><span class="value">Suzhou</span></p>
                        <p class="item"><label>Second Identity:</label><span class="value">Super Dad<input class="edit_ipt" type="hidden" value="Super Dad"></span></p>
                        <p class="item"><label>My Work Scope:</label><span class="value">STA,EE<input class="edit_ipt" type="hidden" value="STA,EE"></span></p>
                        <p class="long_line"></p>
                    </div>
                </div>
            </div>
        </form>
        <a href="javascript:void(0)" class=" close_btn"></a>
        <script src="../js/jquery.js"></script>
        <script src="../js/mousewheel.js"></script>
        <script src="../js/nicescroll.js"></script>
        <script>
            $(function () {
                $('.scroll_list').niceScroll(
                        { arrows: false,
                            touchbehavior: false,
                            cursorcolor: "#12d3c7",
                            cursorborder:"none",
                            background:"#1b9993",
                            cursorwidth:"3px"
                        }
                );

                $('#like_icon').on('click',function (e) {
                    var event=window.event||e;
                    $('.like_people_list').toggle();
                    event.stopPropagation();
                })

                $(document).on("click",function () {

                    $('.like_people_list').hide();
                })
                $('.like_people_list').on('click',function (e) {
                    var event=window.event||e;
                    event.stopPropagation();
                })
                //编辑
                $('#edit_btn').on('click',function () {
                    if(!$(this).hasClass('edit')){
                        $(this).addClass('edit');
                        $('.edit_ipt').prop('type',"text");
                    }else{
                        $(this).removeClass('edit');
                        $('.edit_ipt').prop('type',"hidden");
                    }

                })
                //关闭
                $('.close_btn').on("click",function () {
                    $('.people_popup').remove();
                })
            })
        </script>
    </div>
</div>

</body>
</html>